<template>
  <div id="app">
    <div class="header">
      <img
        src="./assets/back.png"
        alt=""
        class="back"
        v-if="isBack"
        @click="toBack"
      />
      <p
        class="header-title"
        @click="$router.push({ path: '/' })"
        :style="{ marginLeft: isBack ? '0' : '110px' }"
      >
        Game box
      </p>
      <i
        class="el-icon-s-fold"
        style="font-size: 32px"
        @click="drawer = true"
      ></i>
    </div>
    <el-drawer
      title="Screen Menu"
      :visible.sync="drawer"
      direction="rtl"
      size="46%"
    >
      <div class="filter">
        <span @click="menuClick('section1')">Hot Games</span>
        <span @click="menuClick('section2')">Adventure Games</span>
        <span @click="menuClick('section3')">Action Games</span>
        <span @click="menuClick('section4')">Strategy Games</span>
        <span @click="menuClick('section5')">Fighting Games</span>
        <span @click="menuClick('section6')">Simulation Games</span>
        <span @click="menuClick('section7')">Selected Games</span>
        <span @click="menuClick('section8')">Leisure Games</span>
      </div>
    </el-drawer>

    <router-view :sectionsName="sections" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      sections: "",
      isBack: false,
    };
  },
  watch: {
    "$route.name": {
      handler(newVal) {
        if (newVal === "Home") {
          this.isBack = false;
        } else {
          this.isBack = true;
        }
      },
    },
  },
  methods: {
    menuClick(type) {
      this.sections = type;
      this.drawer = false;
    },
    toBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
#app {
  background-color: #ccc;
  padding-top: 70px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  background: #fff;
  .header-title {
    font-size: 24px;
  }
  .back {
    width: 30px;
  }
}
.filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
</style>
